<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script src="../layui/layui.js"></script>
  <link rel="stylesheet" href="../css/basic.css">
  <style  type="text/css">
  .show{
    		border: 2px dotted gainsboro;
    		height: 180px;
    		width: 500px;
    		padding: 10px;
    		margin: 10px auto;
    		line-height: 20px;
    		box-shadow: darkgrey 5px 5px 10px 2px ;
    		border-radius: 20px 5px;
    	}
  .show img{
        width: 100px;
        height: 100px;
        float: left;
        margin: 25px 10px;
    }
    .show input[type='button']{
        width: 40px;
        height: 25px;
        background-color: #f18181;
        color:white;
        border: 1px solid #F18181;
        margin-top: 5px;
        margin-left: 80px;
    }
    .show span{
        display:inline-block;
        background:url(../img/空心.png);
        background-size: cover;
        width: 30px;
        height: 20px;
        position: relative;
        top: 5px;
        left: 80px;
    }
    .show a{
        background: #00b7ee;
        color: white;
        float: right;
        margin-top: 10px;
        margin-right: 30px;
    }
  </style>
</head>
<body>


  <div class="layui-container bs-center" >

        <form action="" class="bs-center layui-form">
            <div class="layui-col-sm5 layui-form-item">
                <label class="layui-form-label">社团名：</label>
                <div class="layui-input-block">
                <input type="text" name="userName" class="layui-input">
                </div>
            </div>
            <div class="layui-col-sm5">
                <label class="layui-form-label">社团ID：</label>
                <div class="layui-input-block">
                <input type="text" name="userAccount" class="layui-input">
                </div>
            </div>
            <div class="layui-col-sm2">
                <a id="searchIpt" class="layui-btn layui-btn-normal">搜索</a>
            </div>
        </form>

        <table class="layui-table" id="partyTable" lay-filter="partyTable"></table>


        <div  style="display:none"  id="itemAll" class="show">
                <img src="../img/触角动漫.jpg" />
		    	<h4>河南大学触角动漫社</h4>
		    	<dl>
		    		<li>成立时间：2000年</li>
		    		<li>挂靠单位：上海虫角有限公司</li>
		    		<li>会员人数：1233人</li>
		    		<li>精品活动：新人见面会、周年祭文艺演出、大型动漫舞台<br/>剧比赛、动漫放映会、原创动漫作品动漫交流会......</li>
		    	</dl>
            <a class="layui-btn" id="iBtn">关闭</a>
        </div>
  </div>

</body>

<form id="partyInfo" class="layui-form bs-hidden fm-in" lay-filter="partyInfo">
        <div class="layui-form-item">
            <label class="layui-form-label"> 社团名称：</label>
            <div class="layui-input-block">
                <input type="text" name="a1" required  lay-verify="required" placeholder="请输入社团名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">挂靠单位：</label>
            <div class="layui-input-block">
            <input type="text" name="a2" required  lay-verify="required" placeholder="请输入挂靠单位" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所在校区：</label>
            <div class="layui-input-block">
            <input type="text" name="a3" required  lay-verify="required" placeholder="请输入所在校区" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">负责人：</label>
            <div class="layui-input-block">
                <input type="text" name="a4" required  lay-verify="required" placeholder="请输入负责人" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">负责人电话：</label>
            <div class="layui-input-block">
            <input type="text" name="a5" required  lay-verify="required|number" placeholder="请输入负责人电话" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">当前人数：</label>
            <div class="layui-input-block">
            <input type="text" name="a6" required  lay-verify="required|number" placeholder="请输入当前人数" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">社团介绍：</label>
            <div class="layui-input-block">
                <textarea name="a7" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
                <div class="layui-input-block btn-center">
                    <button class="layui-btn" lay-submit lay-filter="pwd">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
        </div>
    </form>

<script type="text/html" id="ipts">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="addPar">加入</a>
</script>    

<script>

 layui.use(['laydate','form','jquery','layer','table'], function(){
  var laydate = layui.laydate;
  var form = layui.form
  var $ = layui.jquery
  var layer = layui.layer
  var table = layui.table;
  //自定义验证规则
  form.verify({
    //为账号定义的验证添加规则
  })

  $("#iBtn").click(function(){
      layer.open({
          title:'社团信息修改',
          type:1,
          content:$('#partyInfo'),
          area:['800px','600px'],
      });
  })



 table.render({
    elem: '#partyTable',
    cols: [
        [ //标题栏
        	{
                field: 'PartyId',
                title: '社团号',
                width: "8%",
                align:"center"
                
            },
            {
                field: 'PartyName',
                title: '社团名称',
                width: "10%",
                align:"center"
                
            },
            {
                field: 'PartyType',
                title: '社团类别',
                width: "8%",
                align:"center"
            }, {
                field: 'PartyAddress',
                title: '挂靠单位',
                width: "15%",
                align:"center"
            }, {
                field: 'leader',
                title: '负责人',
                width: "8%",
                align:"center"
            }, {
                field: 'leaderPhone',
                title: '负责人电话',
                width: "15%",
                align:"center"
            }, {
                field: 'peopleCount',
                title: '当前人数',
                width: "8%",
                align:"center"
            },{
                field: 'inroduce',
                title: '社团介绍',
                width: "16%",
                align:"center"
            },{
                field: 'btn',
                title: '操作',
                width: "12%",
                align:"center",
                toolbar:"#ipts"
            }
        ]
    ],
    page: false,
    data: [{
    		"PartyId": "10001",
            "PartyName": "触角动漫社",
            "PartyType": "娱乐",
            "PartyAddress": "上海虫角有限公司",
            "leader": "顾金",
            "leaderPhone": "15536875632",
            "peopleCount": 1233,
            "inroduce": "动漫社是一个热爱动画、漫画、游戏的团体，以组织社员欣赏动漫作品，学习漫画技巧、动漫配音和音乐FM为特色；日常开设动漫绘画教学、动漫配音并参赛并不定期举行cosplay及宅舞表演参展。鼓励社员积极关注生活，寻找同好增进友谊并用图画记录下生活中的思考与感悟，彰显出自己的独特个性并期许推广动漫文化给更多人。",
        },{
    		"PartyId": "10002",
            "PartyName": "软件社",
            "PartyType": "科技",
            "PartyAddress": "河南大学软件学院",
            "leader": "乔保军",
            "leaderPhone": "13637843453",
            "peopleCount": 298,
            "inroduce": "软件社是一个热爱维修和编程的团体，旨在为广大师生服务，有什么困难都能咨询我们。",
        },{
    		"PartyId": "10003",
            "PartyName": "双节棍社",
            "PartyType": "娱乐",
            "PartyAddress": "河南大学体育学院",
            "leader": "王文强",
            "leaderPhone": "17635421322",
            "peopleCount": 345,
            "inroduce": "双节棍社是一个热爱双节棍的社团",
        },{
    		"PartyId": "10005",
            "PartyName": "滑板社",
            "PartyType": "娱乐",
            "PartyAddress": "郑州滑浪有限公司",
            "leader": "若雨",
            "leaderPhone": "19937842354",
            "peopleCount": 435,
            "inroduce": "滑板社是一个热爱滑板的社团",
        },{
    		"PartyId": "10006",
            "PartyName": "粤语协会",
            "PartyType": "文化",
            "PartyAddress": "河南大学欧亚学院",
            "leader": "凌薇",
            "leaderPhone": "13652366432",
            "peopleCount": 313,
            "inroduce": "粤语协会是一个热爱粤语的社团",
        },{
    		"PartyId": "10007",
            "PartyName": "汉服社",
            "PartyType": "文化",
            "PartyAddress": "北京汉服文化有限公司",
            "leader": "晟涵",
            "leaderPhone": "13687563216",
            "peopleCount": 213,
            "inroduce": "汉服社是一个热爱汉服的社团",
        },{
    		"PartyId": "10008",
            "PartyName": "书法协会",
            "PartyType": "文化",
            "PartyAddress": "开封市书法协会",
            "leader": "疏影",
            "leaderPhone": "17636521269",
            "peopleCount": 453,
            "inroduce": "书法协会是一个热爱书法的社团",
        }
        ]
        //,skin: 'line' //表格风格
        ,
});


    table.on('tool(partyTable)', function (obj) {
        var event = obj.event;
        var that = $(this);
        if(event ==='detail'){
                $("#itemAll").slideToggle();
        }else if(event === 'addPar') {
        layer.open({
          type:1,
          closeBtn: 0,
          title:"提示信息",
          content:"<span style='font-size:20px; margin-left:40px'>"+"真的加入么？"+"</span>",
          area:['200px','150px'],
          btn:['确定','取消'],
          btnAlign:'c',
          yes:function(index, layero){
            layer.msg('加入成功！');
            layer.close(index);
          },
          btn2:function(index, layero){
              layer.close(index);
              return false;
          }
        })
    }
    });

})

</script>

</html>

